import React,{ Component,Fragment } from 'react';
import {
	StyleSheet,
	View,
	Text,
	Image,
	TouchableOpacity,
	ScrollView
} from 'react-native';
import CheckList from '../../common/CheckList';
import Toast, {DURATION} from 'react-native-easy-toast';
import Axios from '../../axios';
import NavigationService from '../../common/NavigationService';

class HeaderLeft extends Component{
	render(){
		return (<TouchableOpacity
				onPress={()=>this.props.goBack()}
			>
			<Image
				style={styles.topLeftImg}
				source={require('../../assets/images/back_icon.png')}
			/>
		</TouchableOpacity>)
	}
}
class NextStep extends Component{
	render(){
		return  <TouchableOpacity
					onPress={()=>this.props.nextStep()}
				>
					<View>
						<Text style={{color:'#fff',fontSize:16,marginRight:5}}>下一步</Text>
					</View>
				</TouchableOpacity>
	}
}
let policyId = null;
export default class NetMaintainFirstStep extends Component{

	state = {
		policyList:[],
		policyType:this.props.navigation.getParam("type")
	}


	componentDidMount() {
		 policyId = null;
		 this.getPolicyList();
		 this.props.navigation.setParams({
		 	toast:this.refs.toast
		 });
	}


	static navigationOptions = ({navigation,navigationOptions})=>{
		return {
			title:navigation.getParam("name"),
			headerRight: <NextStep nextStep={()=>{
				if(policyId==null){
					navigation.getParam('toast').show('请选择维系政策',3);
				}else{
					navigation.navigate("NetMaintainSecondStep",{
					name:navigation.getParam("name"),
					policyId:policyId,
					policyType:navigation.getParam("type")
					})
				}
			}} />,
			headerLeft:<HeaderLeft goBack={()=>NavigationService.navigate("TopBottom")} />,
			headerStyle:{
				...navigationOptions.headerStyle,
				backgroundColor:"#f54545"
			},
			headerTitleStyle:{
				fontSize:18,
				flex:1,
				textAlign:'center'
			}
		}
	}
	getPolicyList = ()=>{
		Axios.ajax({
			url:'/mkt/userMatching',
			data:{'type': this.state.policyType}
		}).then((res)=>{
			let policyList = res.data.map(
                    (element)=>{
                    	var firstData =  new Object();
                		if(element.policyCount!='null'){
							firstData.name = element.policyName+'('+element.policyCount+'人)';
                		}else{
							firstData.name = element.policyName;
                		}
                		firstData.value = element.policyId;
                        return firstData;
                    });
			this.setState({policyList:policyList});
		})
	}
	render(){
		return (
			<ScrollView>
				<View style={styles.stepWrap}>
					<View style={styles.stepItem}>
						<Image 
							style={styles.stepImage}
							source={require('../../assets/images/step_active01.png')}
						/>
						<Text style={[styles.stepTxt,styles.stepTxtActive]}>用户筛选</Text>
					</View>
					<View style={[styles.stepLine]}></View>
					<View style={styles.stepItem}>
						<Image 
							style={styles.stepImage}
							source={require('../../assets/images/step02.png')}
						/>
						<Text style={styles.stepTxt}>产品匹配</Text>
					</View>
					<View style={styles.stepLine}></View>
					<View style={styles.stepItem}>
						<Image 
							style={styles.stepImage}
							source={require('../../assets/images/step03.png')}
						/>
						<Text style={styles.stepTxt}>效果评估</Text>
					</View>
					<View style={styles.stepLine}></View>
					<View style={styles.stepItem}>
						<Image 
							style={styles.stepImage}
							source={require('../../assets/images/step04.png')}
						/>
						<Text style={styles.stepTxt}>触点匹配</Text>
					</View>
				</View>
				<View style={styles.policyContent}>
					<View style={styles.policyTitle}>
						<Image 
							style={styles.policyImage}
							source={require('../../assets/images/title_icon.png')}
						/>
						<Text style={styles.policyTitleText}>维系政策</Text>
					</View>
					<View style={styles.policiesContent}>
						<CheckList 
							data={this.state.policyList}
							type='radio' //radio和checkbox
							checkClick={(value)=>{
								policyId = value;
							}}
						/>
					</View>
				</View>
				<Toast 
					ref="toast"  
					position="bottom"
					positionValue={260}
					fadeInDuration={750}
                    fadeOutDuration={1000}
                    opacity={0.8}
				/>
			</ScrollView>
		)
	}
}

const styles=StyleSheet.create({
	topLeftImg:{
		width:22,
		height:22,
		marginLeft:10
	},
	policiesContent:{
		paddingTop:20,
		paddingBottom:20,
		flexDirection:'row',
		flexWrap:'wrap',
		justifyContent:'center'
	},
	policyItem:{
		paddingTop:5,
		paddingRight:10,
		paddingBottom:5,
		paddingLeft:10,
		borderWidth:1,
		borderColor:'#ccc',
		color:'#ccc',
		borderRadius:14,
		marginBottom:10,
		marginLeft:5,
		marginRight:5
	},
	policyItemSelected:{
		borderColor:'#f54545',
		color:'#f54545'
	},
	policyContent:{
		backgroundColor:'#fff',
		marginTop:10,
		borderBottomWidth:1,
		borderBottomColor:'#e6e6e6',
		borderTopWidth:1,
		borderTopColor:'#e6e6e6',
		paddingLeft:10,
		paddingRight:10
	},
	policyTitle:{
		flexDirection:'row',
		alignItems:'center',
		paddingTop:10,
		paddingBottom:10,
		borderBottomWidth:1,
		borderBottomColor:'#e6e6e6'
	},
	policyTitleText:{
		fontSize:16,
		marginLeft:5,
		color:'#757575'
	},
	policyImage:{
		width:20,
		height:20
	},
	stepWrap:{
		backgroundColor:'#fff',
		flexDirection:'row',
		alignItems:'center',
		justifyContent:'space-around',
		paddingTop:5,
		paddingBottom:5,
		borderBottomWidth:1,
		borderBottomColor:'#e6e6e6'
	},
	stepItem:{
		
	},
	stepImage:{
		width:50,
		height:50
	},
	stepTxt:{
		textAlign:'center',
		fontSize:10,
		marginTop:3,
		color:'#757575'
	},
	stepTxtActive:{
		color:'#f54545'
	},
	stepLine:{
		width:30,
		height:1,
		marginLeft:0,
		marginRight:0,
		marginBottom:10,
		backgroundColor:'#e6e6e6'
	},
	stepLineActive:{
		backgroundColor:'#f54545'
	}
})